<template>
   <div class="topBox">
     课程添加编辑
   </div>
  <div class="detailBox">
    <div class="detailBox-center">
      <el-form :model="form" label-width="120px">
        <el-form-item label="课程名称" >
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="课程图片" >
          <template #tip>
            <div class="el-upload__tip text-red">
              limit 1 file, new file will cover the old file
            </div>
          </template>
          <el-upload
              ref="upload"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :limit="1"
              :on-exceed="handleExceed"
              :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">上传图片</el-button>
            </template>

          </el-upload>
        </el-form-item>

        <el-form-item label="添加视频地址" >
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="课程时长">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="每日课时上限">
          <el-input v-model="form.name" />
        </el-form-item>


        <el-form-item label="教练">
          <el-select v-model="form.region" placeholder="选择教练">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="课时费">
          <el-col :span='111'>
            <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
            />
          </el-col>
          <el-col :span="111">
            <el-time-picker
                v-model="form.date2"
                placeholder="Pick a time"
                style="width: 100%"
            />
          </el-col >
          <el-col  class="text-center" :span='111'>
            <span>是否体验</span>
            <el-radio-group v-model="form.resource">
              <el-radio label="是" />
              <el-radio label="否" />
            </el-radio-group>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-col>


        </el-form-item>
        <el-form-item label="课堂备注">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="课程介绍">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps, UploadUserFile } from 'element-plus'
export default defineComponent({
  name:'CourseEditor',
  setup(){

    const fileList = ref<UploadUserFile[]>([
      {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
      {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
    ])

    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles)
    }

    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
      ElMessage.warning(
          `The limit is 3, you selected ${files.length} files this time, add up to ${
              files.length + uploadFiles.length
          } totally`
      )
    }

    const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
      return ElMessageBox.confirm(
          `Cancel the transfert of ${uploadFile.name} ?`
      ).then(
          () => true,
          () => false
      )
    }




    // do not use same name with ref
    const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    })

    const onSubmit = () => {
      console.log('submit!')
    }
    return{
      handleExceed,
      form,
      onSubmit,
      fileList,
      handleRemove,
      handlePreview,
      beforeRemove

    }
  }
})

</script>
<style scoped lang="less">
//顶部文字盒子
.topBox{
  width: 100%;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
  padding: 12px;
  line-height: 40px;
}
//商品详情
.detailBox{

  .detailBox-center{
    width: 68%;
    margin: 20px auto;
  }
}
</style>
